<template>
  <div class="tags">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 从学科管理点击 有参数 面包屑+返回学科 -->
        <!-- 从左侧侧边栏点击 没有参数 面包屑+返回学科 -->
        <div slot="header" class="clearfix" v-if="urlParam">
          <!-- 面包屑 -->
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>学科管理</el-breadcrumb-item>
            <el-breadcrumb-item>大数据</el-breadcrumb-item>
            <el-breadcrumb-item>标签管理</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
         <!-- 表单区 -->
        <el-form ref="form" :model="form" :inline="true" size="small">
          <el-form-item label="标签名称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="form.status" placeholder="请选择">
              <el-option label="开启" value="1"></el-option>
              <el-option label="禁用" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="hEmpty">清除</el-button>
            <el-button @click="hSearch" type="primary" :disabled='isLoading'>搜索</el-button>
          </el-form-item>
          <el-form-item style="color:#409eff;cursor:pointer;float:right">
            <div @click="returnSubject" style="display: inline-block" v-if="urlParam">
              <i class="el-icon-back"></i>
              <span style="padding:0 6px;font-size:13px">返回学科</span>
            </div>
            <el-button
              @click="hAddTag"
              type="success"
              style="margin-left:6px"
              icon="el-icon-edit">
              新增标签
            </el-button>

            <!-- 弹出的 对话框 -->
            <el-dialog
              :title="diglogTitle"
              width="26%"
              :visible.sync="dialogVisible"
              style="cursor:default"
              v-if="dialogVisible">
              <!-- 对话框 表单组件 -->
              <add-tag
                ref="addDialog"
                :tagId='curTagId'
                @close="dialogVisible=false"
                @refresh="doQuery">
              </add-tag>
            </el-dialog>
          </el-form-item>
        </el-form>
        <!-- 过渡条 -->
        <el-alert
          :title="`数据一共${totals}条`"
          type="info"
          :closable="false"
          show-icon
          style="margin:10px 0">
        </el-alert>
        <!-- 表格区 -->
        <el-table
          :data="tableData"
          v-loading='isLoading'
          style="width: 100%">
          <el-table-column
            prop="id"
            label="序号"
            width="80"
            type='index'>
          <!-- type='index' 表格正序数据 -->
          </el-table-column>
          <el-table-column
            prop="subjectName"
            label="所属学科"
            width="180">
          </el-table-column>
          <el-table-column
            prop="tagName"
            label="标签名称">
          </el-table-column>
          <el-table-column
            prop="username"
            label="创建者">
          </el-table-column>
          <el-table-column
            prop="addDate"
            label="创建日期"
            :formatter="dataFormat">
          </el-table-column>
          <el-table-column
            prop="state"
            label="状态"
            line-height:1>
            <template slot-scope="scope">
              <!-- 状态值为1 表示启用 -->
              <span v-if="scope.row.state===1"
              style="font-size:13px">已启用</span>
              <span v-else style="font-size:13px">已禁用</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作">
            <template slot-scope="scope">
              <!-- 状态值为1, 表示启用, 修改和删除不能用 -->
              <el-button type="text" size="medium" v-if="scope.row.state===1"
              @click="hChangeState(scope.row)">禁用</el-button>
              <el-button type="text" size="medium" v-else
              @click="hChangeState(scope.row)">启用</el-button>

              <el-button type="text" size="medium"
              :disabled='scope.row.state===1' @click="hEdit(scope.row.id)">修改</el-button>
              <el-button type="text" size="medium"
              :disabled='scope.row.state===1' @click="hDelete(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- :total总页数, :current-page当前页, :page-size每页显示个数,
        :page-sizes每页显示个数选择器的配置, popper-class每页显示个数选择器的下拉框默认值
        current-change当前页改变时触发-->
        <el-pagination
          background
          layout="prev, pager, next, sizes, jumper"
          :total="totals"
          :current-page.sync="page"
          @current-change='hChangeCurrent'
          :disabled='isLoading'
          :page-size="pageSize"
          @size-change='hChangeSize'
          :page-sizes="[5, 10, 20, 50]"
          style="float:right;margin:10px 0">
        </el-pagination>
      </el-card>
    </div>
  </div>
</template>

<script>
// 导入ajax接口
import { list, changeState, remove } from '@/api/hmmm/tags.js'
// 导入element弹框
import { MessageBox } from 'element-ui'
// 导入时间格式组件
import moment from 'moment'
// 导入添加标签组件
import addTag from '../components/tags-add'

export default {
  name: 'tags',
  components: {
    addTag
  },
  data () {
    return {
      // 是否加载中
      isLoading: false,
      // url是否有参数
      urlParam: this.$route.query.id || null,
      // 表单
      form: {
        name: null,
        status: null
      },
      // 表格
      tableData: [], // 获取的标签列表数据
      page: 1, // 当前页
      pageSize: 10, // 10条/页
      state: null, // 状态
      totals: 0, // 总数据量
      dialogVisible: false, // 是否显示对话框
      curTagId: null, // 区别是编辑还是添加
      isAddParams: false // 是否添加某些参数
    }
  },
  created () {
    this.doQuery()
  },
  computed: {
    diglogTitle () {
      return this.curTagId ? '编辑标签' : '添加标签'
    }
  },
  methods: {
    // 组装参数
    buildParams () {
      const { name, status } = this.form
      const params = {
        page: null || this.page,
        pagesize: null || this.pageSize
      }
      params.state = null || this.state
      params.subjectID = this.urlParam
      if (this.isAddParams) {
        params.tagName = null || name
        params.state = null || status
      }
      return params
    },
    // 获取标签列表数据
    async doQuery () {
      // 发送请求前进入加载状态
      this.isLoading = true
      // 发送的参数
      const params = this.buildParams()
      // console.log(params)
      try {
        const { data: res } = await list(params)
        console.log(res)
        this.tableData = res.items
        this.totals = res.counts
        // 查询结束 结束加载状态
        this.isLoading = false
      } catch (err) {
        console.log(err)
        // 查询结束 结束加载状态
        this.isLoading = false
      }
    },

    // 表单功能
    // 清除
    hEmpty () {
      this.form.name = null
      this.form.status = null
    },
    // 搜索
    hSearch () {
      // console.log(this.form)
      // 添加参数
      this.isAddParams = true
      this.doQuery()
    },
    // 返回学科
    returnSubject () {
      this.$router.push('/subjects/list')
    },
    // 新增标签
    hAddTag () {
      this.curTagId = null
      this.dialogVisible = true
      this.page = 1
    },
    // 编辑标签
    hEdit (id) {
      this.curTagId = id
      this.dialogVisible = true
    },

    // 表格功能
    // 启用/禁用状态切换
    async hChangeState (row) {
      const swichState = row.state === 1 ? 0 : 1
      const data = {
        id: row.id,
        state: swichState
      }
      try {
        const { data: res } = await changeState(data)
        console.log(res)
        this.$message.success(row.state === 1 ? '禁用成功' : '启用成功')
        // 重发请求
        this.doQuery()
      } catch (err) {
        this.$message.error('操作失败')
      }
    },
    // 用户点击删除
    hDelete (rowId) {
      const data = { id: rowId }
      console.log(data)
      MessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 确定
        this.doDelete(data)
      }).catch(() => {
        // 取消
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 执行删除
    async doDelete (data) {
      try {
        const { data: res } = await remove(data)
        console.log(res)
        this.doQuery()
        this.$message.success('删除成功')
      } catch (err) {
        console.log(err)
        this.$message.error('删除失败')
      }
    },
    // 表格时间格式化
    dataFormat (row, column) {
      // console.log(row.addDate)
      var date = row[column.property]
      // console.log(new Date(addTime))
      if (date) {
        return moment(date).format('YYYY-MM-DD HH:mm:ss')
      } else {
        return ''
      }
    },

    // 分页跳转
    // 当前页改变
    hChangeCurrent () {
      this.doQuery()
    },
    // 每页显示个数选择器的配置改变
    hChangeSize (pageSize) {
      // 每页显示个数
      console.log(pageSize)
      // 条/页
      this.pageSize = pageSize
      // 返回第一页
      this.page = 1
      this.doQuery()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
</style>
